﻿<script type="text/javascript">
    $(function () {
        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-modal").dialog({
            width: "50%",
            modal: true,
            autoOpen: false
        });
        $("#buttonShare").button();
        $("#shareIt").button();
        $("#buttonShare").click(function () {
            $("#dialog-modal").dialog('open');
        });
        var selectedFriend = new Array();
        $("#findFriend")
        .bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
					$(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
		.autocomplete({
		    source: function (request, response) {
		        var farr = [];
		        var garr = [];
		        $.getJSON("/CoreService.svc/AutocompleteFriend?start='" + request.term + "'", function (data) {
		            farr = $.map(data.d, function (item) {
		                return {
		                    label: item.DisplayName,
		                    value: item.UserName,
		                    icon: item.Avatar
		                }
		            });
		        }).success(function () {
		            $.getJSON("/CoreService.svc/AutocompleteGroup?start='" + request.term + "'", function (data) {
		                garr = $.map(data.d, function (item) {
		                    return {
		                        label: item.GName,
		                        value: item.GId,
		                        icon: item.Avatar
		                    }
		                });
		            }).success(function () {
		                response(garr.concat(farr));
		            });
		        });
		    },
		    search: function () {
		        // custom minLength
		        var term = $(this).val();
		        if (term.length < 2) {
		            return false;
		        }
		    },
		    focus: function () {
		        // prevent value inserted on focus
		        return false;
		    },
		    select: function (event, ui) {
		        $("#selectedFriendList").append('<span class="ui-corner-all ui-widget-content selectedLabel">' + ui.item.label + ' <a href="#" data-value="' + ui.item.value + '" class="removeTag" role="button" style="background-color:lightCoral;">X</a></span> ');
		        $(this).val("");
		        selectedFriend.push(ui.item.value);
		        return false;
		    }
		}).data("autocomplete")._renderItem = function (ul, item) {
		    return $("<li></li>")
				.data("item.autocomplete", item)
				.append('<a><img src="' + item.icon + '" height="20" />' + item.label + "</a>")
				.appendTo(ul);
		};
        $(".removeTag").live("click", function () {
            for (var i = 0; i < selectedFriend.length; i++) {
                if (selectedFriend[i] == $(this).attr("data-value")) {
                    selectedFriend.splice(i, 1);
                    break;
                }
            }
            selectedFriend;
            $(this).parent().remove();
        });
        $("#friendContainer").click(function () {
            $("#findFriend").focus();
        });
        $("#findFriend").keyup(function () {
            $("#hiddenFindFriend").text($(this).val());
            $(this).width($("#hiddenFindFriend").width());
        });
        $("#shareIt").click(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Connect/SendNotice/",
                data: "{name :" + JSON.stringify(selectedFriend) + ", 'content' :" +  JSON.stringify($("#shareContent").val()) + "}",
                success: function (data) {
                    alert(data);
                }
            });
        });
        //$("#shareContent").val("("+ window.location + ")");
    });
</script>
<div id="dialog-modal" title="@ESN.Languages.LangString.Load("share", "Share")">
    <textarea id="shareContent" cols="300" rows="5" style="width:100%;">
    @ViewBag.ShareContent
    </textarea>
    <div id="friendContainer" style="width: 100%; border: 1px solid #999;cursor: text;background-color: white;min-height:2em;">
        <span id="selectedFriendList"></span>
        <input type="text" id="findFriend" style="border: none !important;box-shadow: none !important;-moz-box-shadow: none !important;-webkit-box-shadow: none !important;outline: 0 !important;padding: 0 !important;width:5px;" />
        <span id="hiddenFindFriend" style="visibility:hidden;"></span>
    </div>
    <button id="shareIt" style="float:right;">OK</button>
</div>
<div style="text-align:right;">
<button id="buttonShare">Share</button>
</div>